<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            top: 40px;
            left: 10px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <button>运动到400</button>
    <div></div>


    <script>

//         var btnArr = document.getElementsByTagName("button");
//         var div = document.getElementsByTagName("div")[0];
// 
//         btnArr[0].onclick = function () {
//             var json = {"left":10,"top":200,"width":300,"height":200};
//             animate(div,json);
//         }
// 
// 
// 
//         //参数变为3个
//         function animate(ele,json){
//             //先清定时器
//             clearInterval(ele.timer);
//             ele.timer = setInterval(function () {
//                 //遍历属性和值，分别单独处理json
//                 //attr == k(键)    target == json[k](值)
//                 for(var k in json){
//                     //四部
//                     var leader = parseInt(getStyle(ele,k)) || 0;
//                     //1.获取步长
//                     var step = (json[k] - leader)/10;
//                     //2.二次加工步长
//                     step = step>0?Math.ceil(step):Math.floor(step);
//                     leader = leader + step;
//                     //3.赋值
//                     ele.style[k] = leader + "px";
//                     console.log(1);
//                     //4.清除定时器
// //                    if(Math.abs(json[k]-leader)<=Math.abs(step)){
// //                        ele.style[k] = json[k] + "px";
// //                        clearInterval(ele.timer);
// //                    }
//                 }
//             },25);
//         }
// 
// 
// 
// 
//         //兼容方法获取元素样式
//         function getStyle(ele,attr){
//             if(window.getComputedStyle){
//                 return window.getComputedStyle(ele,null)[attr];
//             }
//             return ele.currentStyle[attr];
//         }

		var btnArr = document.getElementsByTagName("button");
		var div = document.getElementsByTagName("div")[0];
		
		btnArr[0].onclick = function() {
			var json = {"left":10,"top":200,"width":300,"height":200};
			animate(div,json);
		}
		function animate(ele,json){
			clearInterval(ele.timer);
			ele.timer = setInterval(function(){
				for(var k in json){
					var leader = parseInt(getStyle(ele,k)) || 0;
					var step = (json[k]-leader)/10;
					step = step>0?Math.ceil(step):Math.floor(step);
					leader = leader + step;
					ele.style[k] = leader+"px";
					console.log(1);
					//只要有一个满足条件就全部清除,所以不能这样使用清除定时器
// 					if(Math.abs(json[k]-leader)<=Math.abs(step)){
// 						ele.style[k] = json[k] + "px";
// 						clearInterval(ele.timer);
// 					}
				}
			},25);
		}
		
		function getStyle(ele,attr){
			if(window.getComputedStyle){
				return window.getComputedStyle(ele,null)[attr];
			}
			return ele.currenStyle[attr];
		}
    </script>


</body>
</html>